<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>讨论区</title>
<link rel="stylesheet" href="bootstrap-3.0.3/css/bootstrap.min.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="bootstrap-3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
	td{
		height:35px;
	}
</style>
<script type="text/javascript">
var topicId ;
var pageNo;
function load(){
	$.getJSON("json/detailsAjax",{"topicId":topicId,"pageNo":pageNo},function(data){
		var html="<table class='table table-bordered' style='width:1170px;text-align: center;'><tbody>";
		$.each(data.comments,function(i,item){
			html+="<tr><td style='width:180px;'>昵称："+item["user"]["nickName"]+"</td><td colspan='2'><p style='text-align: left;'>标题："+item["topic"]["title"]+"</p></td></tr>";
			html+="<tr><td style='width:180px;'><img alt='' src='pictures/user/"+item["user"]["id"]+".jpg' style='width:80px;height:80px;'></td>";
			html+="<td colspan='2'>";
			html+="<p style='text-align: left;'>"+item["content"]+"</p>";
			html+="<br/><br/>";
			html+="<p style='text-align: right;'>"+item["user"]["signature"]+"</p></td></tr>";
			html+="<tr><td>积分："+item["user"]["grade"]+"</td>";
			html+="<td><p style='text-align: left;'>发表时间："+item["commentTime"]+"</p></td>";
			html+="<td><p style='text-align: right;'>IP："+item["ip"]+"</p></td></tr>";
		});
		html+="</tbody></table>";
		$("#result").html(html);
	});
}
//加载数据
$(function(){
	topicId = $("#topicId").val();
	pageNo=1;
	load();
	//点击+号时执行加
	$("#jia").click(function(){
		$("#tou_tabl").css({"display":"none"});
		pageNo++;
		load();
	});
	$("#jian").click(function(){
		pageNo--;
		load();
		if(pageNo==1){
			$("#tou_tabl").css({"display":"block"});
		}
	});
});
$(function(){
	//发表评论
	$("#publish_but").click(function(){
		var userName = $("#hid_userName").val();//获取用户名
		var content = $("#content").val();
		var userId = $("#hid_userId").val();
		topicId = $("#topicId").val();
		if(userName!=null&&userName!=""){//判断是否登录了
			$.post("json/publishComment",{"content":content,"userId":userId,"topicId":topicId},function(data){
				alert("发表成功！");
				load();
			});
		}else{
			alert("请先登录！");
			window.location.href="user_login.jsp";
		}
	});
});
</script>
</head>
<body>
	<div style="width:1170px;margin:0px auto;height:155px;">
		<div><img alt="" src="css/images/logo.png"> </div>
		<nav class="navbar navbar-default" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header" style="margin-left:20px;">
					<a class="navbar-brand" href="#">首页</a>
				</div>
			</div>
			<div class="container-fluid"> 
				<form action="isbest" method="get" class="navbar-form navbar-left" role="search">
					<div class="form-group">
						<input type="text" name="title" value="${param.title}" class="form-control" placeholder="主题">
					</div>
					<button type="submit" class="btn btn-default">搜索</button>
				</form>
			</div>
			<div class="container-fluid" style="margin-right:20px;">
			    <c:if test="${loginUser!=null}">
			    	<input type="hidden" value="${loginUser.userName}" id="hid_userName"/>
			    	<input type="hidden" value="${loginUser.id}" id="hid_userId"/>
					<ul class="nav navbar-nav navbar-right">
				      <li><a href="#"><span class="glyphicon glyphicon-user"></span>${loginUser.userName} </a></li>
				      <li><a href="cancel"><span class="glyphicon glyphicon-log-in"></span>注销</a></li>
				    </ul> 
				</c:if>
				<c:if test="${loginUser==null}">
				    <ul class="nav navbar-nav navbar-right">
				      <li><a href="user_register.jsp"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
				      <li><a href="user_login.jsp"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
				    </ul>
			     </c:if>
			 </div>
		</nav>
	</div>
	<div style="width:1170px;height:30px;margin:0px auto;background-color: #F5F5F5;text-indent:1.5em;color: #0C91E0;line-height: 30px;border:2px solid #EFEFEF;">
		首页 / Android讨论区  / <span style="color:#000000;font-size:12px;">Android版块版规，请大家认真阅读</span>
	</div>
	<div style="width:1170px;margin:0px auto;margin-top: 20px;margin-bottom: 20px;border:2px solid #EFEFEF;border-radius:5px;">
		<table class="table table-bordered" style="width:1170px;text-align: center; " id="tou_tabl">
			<tbody>
				<c:forEach items="${topics }" var="topic">
				<tr>
					<td>昵称：${topic.user.nickName }</td>
					<td colspan="2"><p style="text-align: left;">标题：${topic.title }</p></td>
					<input id="topicId" type="hidden" value="${topic.id}"/>
				</tr>
				<tr>
					<td><img alt="" src="pictures/user/${topic.user.id}.jpg" style="width:80px;height:80px;"> </td>
					<td colspan="2">
						<p style="text-align: left;">${topic.content }</p>
						<br/><br/>
						<p style="text-align: right;">${topic.user.signature}</p>
					</td>
				</tr>
				<tr>
					<td>积分：${topic.user.grade}</td>
					<td><p style="text-align: left;">发表时间：${topic.createTime}</p></td>
					<td><p style="text-align: right;">IP：${topic.ip}</p></td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
		<div id="result">
			
		</div>
		<ul class="pagination" style="margin-left:410px;">
		    <li><a id="jian">&laquo;</a></li>
		    <li class="active"><a href="">1</a></li>
		    <li class="disabled"><a href="">2</a></li>
		    <li><a>3</a></li>
		    <li><a>4</a></li>
		    <li><a >5</a></li>
		    <li><a id="jia">&raquo;</a></li>
		    <li><a href="#">共页，第页</a></li>
		</ul>
	</div>
	<div class="panel panel-default" style="width:1170px;height:165px;margin:0px auto;margin-bottom: 20px;">
		<div class="panel-heading">
			<h4 class="panel-title">回复</h4>
		</div>
		<div class="panel-body">
			<span style="float:left;margin-left:30px;margin-right:30px;font-weight: bold;">内容</span>
			<input style=" float:left;width:996px;height:60px;border:2px solid #EFEFEF;border-radius:5px;" type="text" name="content" id="content"/><br/><br/><br/>
			<input id="publish_but" style="width:58px;height:25px;color:#666666;margin-top:10px;clear: left;background-color: #ffffff;margin-left:88px;font-size:14px;border-radius:5px;" type="button" value="发表"/>
		</div>
	</div>
	<div id="footer" style="margin-top:20px;width:1170px;height:70px; margin:0px auto;background-color: #F5F5F5;text-align: center;border:1px solid #EBEBEB;">
		<p>手机论坛 xda.cn</p>
		<p>Designed Sam Chen</p>
	</div>
</body>
</html>